<template>
  <div class="content">
    <Card style="width: 100%; margin-top: 15px">
      <template #title>
        <Icon type="ios-folder"></Icon>
        文件上传
      </template>
      <template #extra>
        <a href="#" @click="demo">
          <Icon type="ios-loop-strong"></Icon>
          demo
        </a>
      </template>
      <Space direction="vertical" type="flex">
        <div class="desc">
          <Alert show-icon>
            功能描述
            <template #icon>
              <Icon type="ios-bulb-outline"></Icon>
            </template>
            <template #desc>
              zzFile组件可以实现将文件上传至minio，如需结构化存储，请使用回调函数getFiles
            </template>
          </Alert>
        </div>
        <div class="props-class">
          <zz-Label text="props"></zz-Label>
          <Table :columns="columns" :data="data" :border="true"></Table>
        </div>
        <div class="emits-class">
          <zz-Label text="emits"></zz-Label>
          <Table :columns="columns1" :data="data1" :border="true"></Table>
        </div>
      </Space>
    </Card>

    <zz-File ref="zzFile" :readOnly="false"></zz-File>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '属性',
          key: 'property',
        },
        {
          title: '说明',
          key: 'description',
        },
        {
          title: '类型',
          key: 'type',
        },
        {
          title: '默认值',
          key: 'default',
        },
      ],
      columns1: [
        {
          title: '事件名',
          key: 'event',
        },
        {
          title: '说明',
          key: 'description',
        },
        {
          title: '返回值',
          key: 'return',
        },
      ],
      data: [
        {
          property: 'readOnly',
          description: '查看模式',
          type: 'Boolean',
          default: 'false',
        },
        {
          property: 'format',
          description: '上传文件的类型',
          type: 'Array',
          default: `['jpg', 'jpeg', 'png', 'pdf', 'xlsx', 'xls', 'doc', 'docx']`,
        },
        {
          property: 'maxSize',
          description: '上传文件大小上限',
          type: 'Integer',
          default: '500 * 1024',
        },
        {
          property: 'fileList',
          description: '已上传文件列表',
          type: 'Array',
          default: '[ ]',
        },
        {
          property: 'exData',
          description: '上传时附带的额外参数',
          type: 'Object',
          default: '-',
        },
        {
          property: 'number',
          description: '上传文件数量上限',
          type: 'Number',
          default: '-',
        },
      ],
      data1: [
        {
          event: 'getFiles',
          description: '点击确定后，得到上传的文件列表',
          return: 'Array',
        },
        {
          event: 'delFile',
          description: '删除文件业务组件回调',
          return: 'Object',
        },
      ],
    }
  },
  methods: {
    demo() {
      this.$refs.zzFile.modelIsOpen = true
    },
  },
}
</script>

<style lang="less" scoped></style>
